<!-- 客服分类信息 -->
<template>
  <div class="table">
    <SearchTable v-model:formStatus="formStatus" ref="searchTableRef" @handleViewEdit="handleViewEdit" />
    <FormDialog v-model:formStatus="formStatus" v-model:form="customerForm" v-model:serviceTime="serviceTime" @handleSuccess="handleSuccess" />
  </div>
</template>

<script setup lang="ts" name="customerServicClass">
import SearchTable from "@/components/configInfo/customer/customerServicClass/SearchTable.vue";
import FormDialog from "@/components/configInfo/customer/customerServicClass/FormDialog.vue";
import type { ViewMode, ViewModeFilter } from "@/types/common";
import type { ICustomer, ICustomerDTO } from "@/types/customerServicClass";
import { anyDate, handleVerifyFormatDate } from "@/utils/utils";
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");
const serviceTime = ref<[Date, Date]>([anyDate(8, 30), anyDate(17, 30)]);
const formStatus = ref<ViewMode>("none");
const customerForm = reactive<ICustomerDTO>({
  id: 0,
  name: "",
  start_time: "",
  end_time: "",
  sort: 0
});
/* 点击编辑按钮 */
function handleViewEdit(row: ICustomer, code: ViewModeFilter) {
  formStatus.value = code;
  nextTick(() => {
    customerForm.id = row.id;
    customerForm.name = row.name;
    customerForm.sort = row.sort;
    customerForm.start_time = handleVerifyFormatDate(row.start_time);
    customerForm.end_time = handleVerifyFormatDate(row.end_time);
    serviceTime.value = [new Date(row.start_time * 1000), new Date(row.end_time * 1000)];
    console.log(serviceTime.value);
  });
}
/* 成功保存或者编辑的回调 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}
</script>

<style lang="scss" scoped></style>
